<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>灵活的背景定位</title>
    <link rel="stylesheet" href="../public.css">
    <style>
        .box {
            width: 300px;
            height: 200px;
            margin: 0 auto;
            color: white;
            text-align: center;
        }

        .position {
            background: url(./img/logo.png) no-repeat #58a;
            background-position: right 10px bottom 10px;
        }

        .origin {
            padding: 10px;
            background: url(./img/logo.png) no-repeat #58a bottom right;
            background-origin: content-box;
        }
        .calc{
            background: url(./img/logo.png) no-repeat #58a bottom right;
            background-position: calc(100% - 20px) calc(100% - 20px);
        }
    </style>
</head>

<body>
    <div class="content">
        <h1>background-position</h1>
        <ul>
            <li>指定背景图片距离任意角的偏移量</li>
        </ul>
    </div>
    <div class="box position">
        background-position
    </div>
    <div class="content">
        <h1>background-origin</h1>
        <ul>
            <li>background-position的参考盒子是以padding box</li>
            <li>background-origin可以改变参考盒子</li>
        </ul>
    </div>
    <div class="box origin">
        background-origin
    </div>
    <div class="content">
        <h1>calc()方案</h1>
        <ul>
            <li>calc() 函数用于动态计算长度值。</li>
            <li>运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；</li>
            <li>任何长度值都可以使用calc()函数进行计算；</li>
            <li>calc()函数支持 "+", "-", "*", "/" 运算；</li>
            <li>calc()函数使用标准的数学运算优先级规则；</li>
        </ul>
    </div>
    <div class="box calc">
        calc()方案
    </div>
</body>

</html>